<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html页面</title>
    <link href="../css/base.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        /*内部css样式*/
        /*标签选择器*/
        div {
            color: aqua;
        }

        /*id选择器*/
        #p2 {
            color: #244887;
        }

        /*类选择器*/
        .pcolor {
            color: #6D4A2E;
        }

        /*组合选择器*/


        /*包含组合关系*/
        /*包含选择器*/
        #p2 div{
            /*color: yellow !important; *//*提升css属性显示的优先级*/
            color: yellow;
        }

        /*子对象组合关系*/
        /*子类选择器*/
        #p2 > div{
            color: pink;
        }

        /*
        子类选择器：只选择选择器的第一层标签下的直接子类对象；
                    只选择子类，不选择孙子类；
        包含选择器：选择选择器的第一层下的所有的子类对象；
                    既选择子类，又选择孙子了，还选择玄孙类，其实，选择所有的子对象；

        子类选择器的优先级高于包含选择器的优先级；
        */
    </style>
</head>
<body>
<div>
    <!--标签的style属性中的样式就是，内联css样式-->
    <div style="color: green;">这是一个div~~~</div>
    <div id="p2">
        这是一个div~~~
        <div>这是一个子div~~~</div>
        <div>这是一个子div~~~</div>
        <div>这是一个子div~~~
            <div>这是一个子子div~~~</div>
            <div>这是一个子子div~~~</div>
        </div>
        <div>这是一个子div~~~</div>
        <span>这是一个div</span>
    </div>

    <div>这是一个div~~~</div>
    <div>这是一个div~~~</div>
    <div class="pcolor">这是一个div~~~

    </div>
    <div>这是一个div~~~</div>


</div>
</body>
</html>